<template>
    <div>
        <el-page-header content="编辑新闻" @back="handleBack()" title="新闻管理" />
        <el-form ref="newsFormRef" :model="newsForm" :rules="newsFormRules" label-width="80px" class="demo-ruleForm"
            status-icon>
            <!-- 标题 -->
            <el-form-item label="新闻标题" prop="title">
                <el-input v-model="newsForm.title" />
            </el-form-item>
            <!-- 内容 -->
            <el-form-item label="新闻内容" prop="content">
                <!-- 使用editor组件 -->
                <editor @event="handleChange" :content="newsForm.content" v-if="newsForm.content"/>
            </el-form-item>
            <!-- 类别 -->
            <el-form-item label="新闻类别" prop="category">
                <el-select v-model="newsForm.category" class="m-2" placeholder="Select" style="width:100%;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <!-- 封面图片 -->
            <el-form-item label="新闻封面" prop="cover">
                <Upload :avatar="newsForm.cover" @kerwinchange="handleUploadChange" />
            </el-form-item>
            <!-- 添加新闻 -->
            <el-form-item>
                <el-button type="primary" @click="submitForm()">更新新闻</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive,onMounted } from 'vue'
// 引入editor组件
import editor from "@/components/editor/Editor"
// 引入upload组件
import Upload from '@/components/upload/Upload'
import upload from '@/util/upload';
// import router from '@/router';
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios';

const router = useRouter()
const route = useRoute()
const newsFormRef = ref()
const newsForm = reactive({
    title: "",
    content: "",
    category: 1,  //1:最新动态 2：典型案例 3：通知公告
    cover: "",
    file: null,
    isPublish: 0  //0:未发布  1：已发布
})

// 规则
const newsFormRules = reactive({
    title: [
        { required: true, message: "请输入新闻标题", trigger: "blur" }
    ],
    content: [
        { required: true, message: "请输入新闻内容", trigger: "blur" }
    ],
    category: [
        { required: true, message: "请选择新闻类别", trigger: "blur" }
    ],
    cover: [
        { required: true, message: "请上传新闻封面", trigger: "blur" }
    ]
})

// 每次editor内容改变的回调
const handleChange = (data) => {
    // console.log(data)
    newsForm.content = data
}

// 新闻类别
const options = [
    {
        label:"最新动态",
        value:1,
    },
    {
        label:"典型案例",
        value:2,
    },
    {
        label:"通知公告",
        value:3,
    },
]

const handleUploadChange = (file)=>{
    newsForm.cover = URL.createObjectURL(file);
    newsForm.file = file
}

// 提交校验
const submitForm = ()=>{
    newsFormRef.value.validate(async (valid)=>{
        if(valid){
            // console.log(newsForm)
            // 后台通讯
            await upload("/adminapi/news/list",newsForm)
            router.back()
        }
    })
}

// 点击返回
const handleBack = ()=>{
    router.back()
}
// 取当前页面数据
onMounted(async ()=>{
    // console.log(route.params.id)

    const res = await axios.get(`/adminapi/news/list/${route.params.id}`)
    console.log(res.data.data[0])

    // 绑定初始值
    Object.assign(newsForm,res.data.data[0])
})
</script>

<!-- 样式 -->
<style lang="scss" scoped>
.el-form {
    margin-top: 50px;
}
</style>